<%--
  Created by IntelliJ IDEA.
  User: 谢斌
  Date: 2021/1/29
  Time: 1:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="style/js/jquery.js"></script>
<link href="style/css/common_style_blue.css" rel="stylesheet" type="text/css" />
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        body {
            background-image: url("style/images/caiguan.jpeg");
            background-size: 100%;
            background-repeat: no-repeat;
        }

        #login_frame {
            width: 400px;
            height: 260px;
            padding: 13px;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;

            background-color: rgba(240, 255, 255, 0.5);

            border-radius: 10px;
            text-align: center;
        }

        form p > * {
            display: inline-block;
            vertical-align: middle;
        }

        #image_logo {
            margin-top: 8px;
        }

        .label_input {
            font-size: 14px;
            font-family: 宋体;

            width: 65px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: #3CD8FF;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .text_field {
            width: 278px;
            height: 28px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 0;
        }

        #btn_login {
            font-size: 14px;
            font-family: 宋体;

            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: #3BD9FF;
            border-radius: 6px;
            border: 0;

            float: left;
        }

        #forget_pwd {
            font-size: 12px;
            color: white;
            text-decoration: none;
            position: relative;
            float: right;
            top: 5px;

        }

        #forget_pwd:hover {
            color: blue;
            text-decoration: underline;
        }

        #login_control {
            padding: 0 20px;
        }
    </style>
    <script>
        $(function () {
            //登录前验证
            $("#btn_login").click(function () {
                var username=document.getElementById("username");
                var password=document.getElementById("password");
                if (username.value == ""){
                    alert("用户名不能为空");
                }else if (password.value == ""){
                    alert("密码不能为空");
                }
            });

            //用户名验证
            $("#username").change(function () {
                var value=$("#username").val();
                if(value.length==0) {
                    alert("用户名不能为空");
                }
                if (value.indexOf(" ")>=0){
                    alert("用户名不能有空格");
                }
                if(value.length<6||value.length>12){
                    alert("用户名只能输入6-12个字符");
                }
                //定义正则表达式
                var pattern=/^[0-9a-zA-Z]/;
                if(!pattern.test(value)) {
                    alert("用户名只能输入字母或数字");
                }
            });

            //密码验证
            $("#password").change(function () {
                var value=$("#password").val();
                if(value.length==0) {
                    alert("密码不能为空");
                }
                if (value.indexOf(" ")>=0){
                    alert("密码不能有空格");
                }
                if(value.length<6||value.length>12){
                    alert("密码只能输入6-12个字符");
                }
                //定义正则表达式
                var pattern=/^[0-9a-zA-Z]/;
                if(!pattern.test(value)) {
                    alert("密码只能输入字母或数字");
                }
            });
        });

    </script>
</head>


<body>
<div id="login_frame">

    <form method="post" action="/user?action=login">

        <p><label class="label_input">用户名</label>
            <input type="text" id="username" name="username"  class="text_field" placeholder="只能输入字母或数字，6-12个字符"/>
        </p>
        <p><label class="label_input">密码</label>
            <input type="text" id="password" name="password"  class="text_field" placeholder="密码长度6-12位"/>
        </p>

        <div id="login_control">
            <input type="submit" id="btn_login" value="登录"/>&nbsp;&nbsp;
            <span id="errorMsg" style="color:red">${error}</span>
        </div>
        <a>注册</a>
    </form>
</div>

</body>
</html>

